<template>
  <div class="loginWrap">
    <div class="loginBox">
      <div class="loginTitle">用户登录</div>
      <div class="loginContent">
        <div class="inputBar">
          <input type="text" v-model="form.userName" placeholder="手机号/用户名" @keyup.enter="toLogin">
        </div>
        <div class="inputBar">
          <input type="password" v-model="form.password" placeholder="密码" @keyup.enter="toLogin">
        </div>
        <div class="btnBar">
          <button @click="toLogin">登录</button>
        </div>
      </div>
      <div class="register">
        <a href="register">新用户注册</a>
      </div>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
import api from "@/api/index.js";
export default {
  components: {},
  data() {
    return {
      form: {
        userName: null,
        password: null
      }
    };
  },
  mounted() { },
  sockets: {},
  methods: {
    toLogin() {
      api.userLogin(this.form).then(res => {
        if (res.data.code == 0) {
          // 储存用户信息
          localStorage.userInfo = JSON.stringify(res.data.data);
          this.$router.push({ name: "chat" });
        }
      });
    }
  }
};
</script>

<style lang='scss' scoped>
.loginWrap {
  position: relative;
  width: 100%;
  height: 100%;
  .loginBox {
    padding: 20px;
    position: absolute;
    width: 300px;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .loginTitle {
      font-size: 20px;
    }
    .loginContent {
      margin-top: 40px;
      .inputBar {
        margin: 20px 0;
        width: 100%;
        > input {
          padding: 0;
          width: 100%;
          height: 40px;
          font-size: 14px;
          border-radius: 4px;
          text-indent: 10px;
          border: 1px solid #e2e2e2;
          outline: none;
          transition: all 300ms;
          &:focus {
            border: 1px solid #6989ff;
          }
        }
      }
      .btnBar {
        margin: 20px 0;
        width: 100%;
        > button {
          width: 100%;
          height: 40px;
          font-size: 14px;
          border: 1px solid #6989ff;
          border-radius: 4px;
          background: #6989ff;
          color: #fff;
          outline: none;
          transition: all 300ms;
          cursor: pointer;
          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
    .register {
      font-size: 12px;
      text-align: center;
      > a {
        cursor: pointer;
        color: #557ea2;
      }
    }
  }
}
</style>